<!--
  ~ Copyright (c) 2020 the original author or authors
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      https://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  ~ or implied. See the License for the specific language governing
  ~ permissions and limitations under the License.
  -->

<table *ngIf="!isLoading" mat-table [dataSource]="data">
  <caption>
    {{
      'users.caption' | translate
    }}
  </caption>

  <!-- Position Column -->
  <ng-container matColumnDef="user">
    <th mat-header-cell *matHeaderCellDef scope="col">{{ 'users.user' | translate }}</th>
    <td mat-cell *matCellDef="let element">{{ element.firstName }} {{ element.lastName }}</td>
  </ng-container>

  <ng-container matColumnDef="role">
    <th mat-header-cell *matHeaderCellDef scope="col">{{ 'users.role' | translate }}</th>
    <td mat-cell *matCellDef="let element">
      <mat-form-field>
        <mat-select
          *ngIf="isRoleChangeAllowed(element); else disabledRole"
          [value]="element.role"
          (selectionChange)="changeRole($event, element)"
        >
          <mat-option *ngFor="let role of availableRoles" [value]="role">{{ role }}</mat-option>
        </mat-select>
        <ng-template #disabledRole>
          <mat-select disabled [(value)]="element.role">
            <mat-option [value]="element.role">{{ element.role }}</mat-option>
          </mat-select>
        </ng-template>
      </mat-form-field>
    </td>
  </ng-container>

  <ng-container matColumnDef="delete">
    <th mat-header-cell *matHeaderCellDef scope="col"></th>
    <td mat-cell *matCellDef="let element">
      <mat-icon
        *ngIf="
          (element.userId === this.currentUserId && element.role !== roleEnum.OWNER) ||
          (userRole === roleEnum.ADMINISTRATOR && element.role !== roleEnum.OWNER) ||
          (userRole === roleEnum.OWNER && element.role !== roleEnum.OWNER)
        "
        (click)="delete(element)"
        title="remove user"
        >delete_outline</mat-icon
      >
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

<ng-container *ngIf="(data.length < 1 || (data.length <= 1 && searchText == '')) && (createHeader || createMessage) && !isLoading">
  <h4>{{ messageHeader }}</h4>
  <div class="create-new-message">
    <mat-icon>info</mat-icon>
    <p>{{ message }}</p>
  </div>
</ng-container>
